<template>
  <el-table-column
    prop="status"
    label="状态"
    min-width="150"
  >
    <template #default="scope">
      <el-switch
        v-model="scope.row.onlineStatus"
        :before-change="() => beforeChange(scope.row)"
        @change="handleStatusChange"
        inline-prompt
        :loading="scope.row.statusLoading_fe"
        :active-value="1"
        :inactive-value="0"
        active-text="上架"
        inactive-text="下架"
        @click="switchStatus(scope.row)"
      />
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { IGoodsPageRow } from "@/api/modules/pointsMall";

const emits = defineEmits([ 
  'status-change', 
  'status-changed' 
])
const props = defineProps<{
  beforeChange: (row: IGoodsPageRow) => Promise<boolean>
}>()

const switchStatus = (row: IGoodsPageRow) => {
  console.log('点击了切换商品状态')
  emits('status-change', row)
}

const beforeChange = (row: IGoodsPageRow) => {
  if (!props.beforeChange) {
    return Promise.resolve(true)
  }

  return props.beforeChange(row)
}

const handleStatusChange = (val: number) => {
  emits('status-changed', val);
}

</script>
